<template>
	 <div class="thumb-example">
    <swiper
      class="top-swiper"
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff'
      }"
      :modules="modules"
      :space-between="10"
      :navigation="true"
      :thumbs="{ swiper: thumbsSwiper }"
    >
      <swiper-slide class="slide" v-for="(v,index) in imgList.list" :key="index">
        <img :src="imgPage(v.src)" />
      </swiper-slide>
    </swiper>
    <swiper
      class="thumbs-swiper"
      :modules="modules"
      :space-between="10"
      :slides-per-view="4"
      :watch-slides-progress="true"
      :prevent-clicks="false"
      :prevent-clicks-propagation="false"
      @swiper="setThumbsSwiper"
    >
      <swiper-slide class="slide" v-for="(v,index) in imgList.list" :key="index">
        <img :src="imgPage(v.src)" />
		<span>{{ v.title }}</span>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import type SwiperClass from 'swiper'
  import { Navigation, Pagination, Scrollbar, A11y, Thumbs } from 'swiper'
  import 'swiper/css'
  import 'swiper/css/navigation'
  import 'swiper/css/thumbs'
  import 'swiper/css/scrollbar'

      const thumbsSwiper = ref<SwiperClass>()
	  const imgList = reactive({
		list:[
			{ src: '1.jpg', title: '医疗版三探头中医智能脉诊仪1' },
			{ src: '2.jpg', title: '医疗版三探头中医智能脉诊仪2' },
			{ src: '3.jpg', title: '医疗版三探头中医智能脉诊仪3' },
			{ src: '4.jpg', title: '医疗版三探头中医智能脉诊仪4' },
			{ src: '2.jpg', title: '医疗版三探头中医智能脉诊仪2' },
			{ src: '3.jpg', title: '医疗版三探头中医智能脉诊仪3' },
			{ src: '3.jpg', title: '医疗版三探头中医智能脉诊仪3' },
			{ src: '4.jpg', title: '医疗版三探头中医智能脉诊仪4' },
			{ src: '2.jpg', title: '医疗版三探头中医智能脉诊仪2' },
			{ src: '3.jpg', title: '医疗版三探头中医智能脉诊仪3' }
		]
	  })
      const setThumbsSwiper = (swiper: SwiperClass) => {
        thumbsSwiper.value = swiper
      }

	  const imgPage = (imgName:string)=>{
		const path = `../assets/swiper/${imgName}`;
		const modules = import.meta.globEager("../assets/swiper/*");
		return modules[path].default
	  }
	  const modules= [ Navigation, Pagination, Scrollbar, A11y, Thumbs]
</script>

<style lang="scss" scoped>
//   @import '@/styles/variables.scss';
//   @import '@/styles/mixins.scss';
//   @import './style.scss';

  .thumb-example {
    height: 480px;
    background-color: #fff;
  }

  .top-swiper,
  .thumbs-swiper {
    .slide {
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .top-swiper {
    height: 80%;
    width: 100%;
  }

  .thumbs-swiper {
    height: 20%;
    box-sizing: border-box;
    padding: 20px 0;

    .slide {
      width: 25%;
      height: 100%;
      opacity: 1;
      &:not(.swiper-slide-thumb-active) {
        opacity: 0.4;
      }
    }
  }
</style>